<template>
  <view class="container">
    <view class="bgBox">
      <image
        src="/static/images/login/phone_bg.png"
        mode="scaleToFill"
        class="bg-st"
      />
    </view>
    <view class="userinfo">
      <view class="userinfo-top">
        <image class="head" :src="userinfo.avatar" mode=""></image>
        <text @click="toEdit" class="edit flex-center-center">编辑资料</text>
      </view>
      <view class="userinfo-name">
        <text>{{ userinfo.nickname }}</text>
        <image
          class="vip"
          src="/static/images/my/vip.png"
          v-if="userinfo.invite_vip == 1"
          mode=""
        ></image>
        <image
          class="institution"
          src="/static/images/my/institution_vip_jy.png"
          v-if="userinfo.institution_vip_jy == 1"
          mode=""
        ></image>
        <image
          class="institution_vip_gys"
          src="/static/images/my/institution_vip_gys.png"
          v-if="userinfo.institution_vip_gys == 1"
          mode=""
        ></image>
        <image
          class="manufacturer"
          src="/static/images/my/manufacturer.png"
          v-if="userinfo.manufacturer_vip == 1"
          mode=""
        ></image>
      </view>
      <view class="userinfo-btm">
        <text>{{ userinfo.follow_num }}</text>
        <text class="attribute">关注</text>
        <text>{{ userinfo.fan_num }}</text>
        <text class="attribute">粉丝</text>
      </view>
    </view>
    <!-- 	:style="{'height':  'calc('+ scrollHeight  +'px' +' ' + '-' +' ' +'178rpx)'}" -->
    <view class="content">
      <view @click="toWallet" class="money flex-center-between">
        <view class="allMoney">
          <text class="num">{{ userinfo.all_money }}</text>
          <text class="allMoney-btm">累计收益(元)</text>
        </view>
        <view class="balance">
          <text class="num">{{ userinfo.balance }}</text>
          <text class="balance-btm">余额(元)</text>
        </view>
      </view>
      <view class="myServices">
        <view class="myServices-title"> 我的服务 </view>
        <view class="servicesType">
          <view
            v-for="(item, index) in servicesList"
            :key="index"
            @click="toMyServicecs(item, index)"
            class="servicesType-part"
          >
            <image :src="item.icon" mode=""></image>
            <text>{{ item.label }}</text>
          </view>
        </view>
      </view>
      <view class="commonServices">
        <view class="commonServices-title"> 常用 </view>
        <view class="commonServicesType" v-if="showThat">
          <!-- <view
            v-for="(item, index) in commonServicesList"
            :key="index"
            @click="toCommonServices(item, index)"
            class="commonServicesType-part"
          >
            <image class="icon" :src="item.icon" mode=""></image>
            <view class="name">
              {{ item.label }}
            </view>
            <image
              class="icon-right"
              src="/static/images/my/icon-right.png"
              mode=""
            ></image>
          </view> -->
          <!-- 
		  {
          label: "机构申请",
          icon: icon5,
          isShow: true,
        },
        {
          label: "制造商申请",
          icon: icon6,
          isShow: true,
        },
        {
          label: "招标会员",
          icon: icon7,
          isShow: true,
        },
        {
          label: "黑名单",
          icon: icon8,
          isShow: true,
        },
        {
          label: "我要推广",
          icon: icon9,
          isShow: true,
        }, -->
           <view v-if="manufacturer_vip!=1"> 
            <view
              class="commonServicesType-part"
              @click="toCommonServices(item, 0)"
              v-if="institution_vip == 0"
            >
              <image
                class="icon"
                src="../../static/images/my/institution-icon.png"
                mode=""
              ></image>
              <view class="name"> 机构申请 </view>
              <image
                class="icon-right"
                src="/static/images/my/icon-right.png"
                mode=""
              ></image>
            </view>
            <view
              class="commonServicesType-part"
              @click="toCommonServices(item, 0)"
              v-if="institution_vip == 1"
            >
              <image
                class="icon"
                src="../../static/images/my/institution-icon.png"
                mode=""
              ></image>

              <view class="name"> 机构续费 </view>
              <image
                class="icon-right"
                src="/static/images/my/icon-right.png"
                mode=""
              ></image>
            </view>
        </view>

		<view v-if="institution_vip!=1">
          <view
            class="commonServicesType-part"
            v-if="manufacturer_vip == 0"
            @click="toCommonServices(item, 1)"
          >
            <image
              class="icon"
              src="../../static/images/my/manufacturer-icon.png"
              mode=""
            ></image>
            <view class="name"> 制造商申请 </view>
            <image
              class="icon-right"
              src="/static/images/my/icon-right.png"
              mode=""
            ></image>
          </view>

          <view
            class="commonServicesType-part"
            v-if="manufacturer_vip == 1"
            @click="toCommonServices(item, 1)"
          >
            <image
              class="icon"
              src="../../static/images/my/manufacturer-icon.png"
              mode=""
            ></image>
            <view class="name"> 制造商续费 </view>
            <image
              class="icon-right"
              src="/static/images/my/icon-right.png"
              mode=""
            ></image>
          </view>
		</view>



          <view
            class="commonServicesType-part"
            @click="toCommonServices(item, 2)"
          >
            <image
              class="icon"
              src="../../static/images/my/vip-icon.png"
              mode=""
            ></image>
            <view class="name"> 招标会员 </view>
            <image
              class="icon-right"
              src="/static/images/my/icon-right.png"
              mode=""
            ></image>
          </view>
          <view
            class="commonServicesType-part"
            @click="toCommonServices(item, 3)"
          >
            <image
              class="icon"
              src="../../static/images/my/blacklist-icon.png"
              mode=""
            ></image>
            <view class="name"> 黑名单 </view>
            <image
              class="icon-right"
              src="/static/images/my/icon-right.png"
              mode=""
            ></image>
          </view>
          <view
            class="commonServicesType-part"
            @click="toCommonServices(item, 4)"
          >
            <image
              class="icon"
              src="../../static/images/my/promotion-icon.png"
              mode=""
            ></image>
            <view class="name"> 我要推广 </view>
            <image
              class="icon-right"
              src="/static/images/my/icon-right.png"
              mode=""
            ></image>
          </view>
        </view>
      </view>
    </view>
    <tabbar></tabbar>
  </view>
</template>

<script>
import api from "@/api/index.js";
import tabbar from "../../components/tabbar.vue";
import icon1 from "../../static/images/my/services1.png";
import icon2 from "../../static/images/my/services2.png";
import icon3 from "../../static/images/my/services3.png";
import icon4 from "../../static/images/my/services4.png";
import icon5 from "../../static/images/my/institution-icon.png";
import icon6 from "../../static/images/my/manufacturer-icon.png";
import icon7 from "../../static/images/my/vip-icon.png";
import icon8 from "../../static/images/my/blacklist-icon.png";
import icon9 from "../../static/images/my/promotion-icon.png";
export default {
  components: {
    tabbar,
  },
  data() {
    return {
      scrollHeight: uni.getStorageSync("scrollHeight"),
      safeAreaBottom: uni.getStorageSync("safeAreaBottom"),
      servicesList: [
        {
          label: "动态",
          icon: icon1,
        },
        {
          label: "点赞",
          icon: icon2,
        },
        {
          label: "关注",
          icon: icon3,
        },
        {
          label: "粉丝",
          icon: icon4,
        },
      ],
      commonServicesList: [
        {
          label: "机构申请",
          icon: icon5,
          isShow: true,
        },
        {
          label: "制造商申请",
          icon: icon6,
          isShow: true,
        },
        {
          label: "招标会员",
          icon: icon7,
          isShow: true,
        },
        {
          label: "黑名单",
          icon: icon8,
          isShow: true,
        },
        {
          label: "我要推广",
          icon: icon9,
          isShow: true,
        },
      ],
      userinfo: {},
      showThat: false,
      institution_vip: 0, //机构
      manufacturer_vip: 0, //制造商
    };
  },
  onShow() {
    this.init();
    let that = this;
    that.$nextTick(() => {
      console.log("flsfs", uni.getStorageSync("userinfo"));
      //机构 求货 //制造商 求货代加工
      // if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo')
      // 	.manufacturer_vip != 1) {
      // }
      if (uni.getStorageSync("userinfo").institution_vip == 1) {
        that.commonServicesList[0].label = "机构续费";
        that.commonServicesList.splice(1, 1);
      } else if (uni.getStorageSync("userinfo").manufacturer_vip == 1) {
        that.commonServicesList[1].label = "制造商续费";
        that.commonServicesList.splice(0, 1);
      }
      that.showThat = true;
    });
  },
  onLoad() {
    uni.hideTabBar();
  },
  methods: {
    init() {
      this.getMyInfo();
      // this.userinfo = uni.getStorageSync('userinfo')
    },
    getMyInfo() {
      api.base.getMyInfo().then((res) => {
        if (res.code == 1) {
          this.userinfo = res.data;
          console.log("this.userinfo", this.userinfo);
          this.institution_vip = res.data.institution_vip; //是否是机构会员 //1 是 0不是
          this.manufacturer_vip = res.data.manufacturer_vip; //是否是制造商 //1 是 0不是
        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    toMyServicecs(item, index) {
      console.log("我的服务", item);

      if (index == 0) {
        uni.navigateTo({
          url: "/pages/my/trends/index",
        });
      } else if (index == 1) {
        uni.navigateTo({
          url: "/pages/my/giveLike/index",
        });
      } else if (index == 2) {
        uni.navigateTo({
          url: "/pages/my/followFans/index?currentIndex=" + 0,
        });
      } else if (index == 3) {
        uni.navigateTo({
          url: "/pages/my/followFans/index?currentIndex=" + 1,
        });
      }
    },
    toCommonServices(item, index) {
      if (index == 0) {
        if (
          this.userinfo.manufacturer_vip_apply == 1 &&
          this.userinfo.manufacturer_vip == 0
        ) {
          uni.showToast({
            title: "制造商正在申请中，不可申请机构",
            icon: "none",
          });
          // uni.navigateTo({
          // 	url: '/pages/my/manufacturer/index'
          // })
        }
        if (
          this.manufacturer_vip_apply == 1 &&
          this.userinfo.manufacturer_vip == 1
        ) {
          uni.showToast({
            title: "是制造商会员，不可继续申请",
            icon: "none",
          });
        }

        if (this.userinfo.manufacturer_vip_apply == 0) {
          uni.navigateTo({
            url: "/pages/my/institution/index",
          });
        }
      } else if (index == 1) {
        console.log("this.userinfo.manufacturer_vip_apply", this.userinfo);

        if (
          this.userinfo.institution_vip_apply == 1 &&
          this.userinfo.institution_vip == 0
        ) {
          uni.showToast({
            title: "机构正在申请中，不可申请制造商",
            icon: "none",
          });
          // uni.navigateTo({
          // 	url: '/pages/my/manufacturer/index'
          // })
        }
        if (
          this.userinfo.institution_vip_apply == 1 &&
          this.userinfo.institution_vip == 1
        ) {
          uni.showToast({
            title: "是机构会员，不可继续申请",
            icon: "none",
          });
        }

        if (this.userinfo.institution_vip_apply == 0) {
          uni.navigateTo({
            url: "/pages/my/manufacturer/index",
          });
        }

        // if(this.userinfo.manufacturer_vip_apply==1){
        // 	uni.showToast({
        // 		title:'制造商机构已经申请，请进行机构申请',
        // 		icon:'none'
        // 	})
        // }else{
        // 	uni.navigateTo({
        // 	  url: '/pages/my/manufacturer/index'
        // 	})
        // }
      } else if (index == 2) {
        uni.navigateTo({
          url: "/pages/my/vip/index",
        });
      } else if (index == 3) {
        uni.navigateTo({
          url: "/pages/my/blacklist/index",
        });
      } else if (index == 4) {
        uni.navigateTo({
          url: "/pages/my/promotion/index",
        });
      }

      // console.log('常用服务', item, index)
      // let url = '';
      // switch (index) {
      //   case 0:
      //     url = '/pages/my/institution/index';
      //     break;
      //   case 1:
      //     url = '/pages/my/manufacturer/index';
      //     break;
      //   case 2:
      //     url = '/pages/my/vip/index';
      //     break;
      //   case 3:
      //     url = '/pages/my/blacklist/index';
      //     break;
      //   case 4:
      //     url = '/pages/my/promotion/index';
      //     break;
      // };
      // uni.navigateTo({
      //   url
      // })
    },
    toEdit() {
      uni.navigateTo({
        url: "/pages/my/edit/index",
      });
    },
    toWallet() {
      uni.navigateTo({
        url: "/pages/my/wallet/index",
      });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  // padding-bottom:120rpx;
}

.bgBox {
  position: absolute;
  width: 100vw;
  height: 300rpx;
  overflow: hidden;
  top: 0;
  z-index: -1;
}

.bg-st {
  width: 100%;
}

.userinfo {
  position: relative;
  top: 178rpx;
  width: 750rpx;
  height: 270rpx;
  background: #ffffff;
  border-radius: 32rpx 32rpx 0rpx 0rpx;

  &-top {
    position: relative;
    width: 100%;
    padding: 0 32rpx;
    box-sizing: border-box;
    height: 154rpx;
    top: -42rpx;
    display: flex;
    // flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;

    .head {
      width: 154rpx;
      height: 154rpx;
      box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);
      border: 4rpx solid #ffffff;
      border-radius: 50%;
    }

    .edit {
      margin-right: 10rpx;
      margin-bottom: 22rpx;
      width: 160rpx;
      height: 54rpx;
      background: #f5f5f5;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #666666;
      line-height: 28rpx;
    }
  }

  &-name {
    display: flex;
    align-items: center;
    height: 50rpx;
    margin: -10rpx 0 16rpx 32rpx;
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 42rpx;

    .vip {
      width: 46rpx;
      height: 32rpx;
      margin-left: 32rpx;
    }

    .institution {
      width: 96rpx;
      height: 32rpx;
      margin-left: 12rpx;
    }
    .institution_vip_gys {
      width: 116rpx;
      height: 32rpx;
      margin-left: 12rpx;
    }

    .manufacturer {
      width: 76rpx;
      height: 32rpx;
      margin-left: 12rpx;
    }
  }

  &-btm {
    height: 40rpx;
    margin-left: 32rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 33rpx;
    display: flex;

    .attribute {
      height: 34rpx;
      font-size: 24rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      line-height: 28rpx;
      margin-left: 14rpx;
      margin-right: 36rpx;
    }
  }
}

.content {
  width: 100%;
  position: absolute;
  top: 448rpx;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 9;

  .money {
    width: 670rpx;
    height: 146rpx;
    margin: 24rpx 0;
    background: linear-gradient(135deg, #ff7c7c 0%, #9747ff 100%);
    box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(255, 86, 91, 0.16);
    border-radius: 40rpx 40rpx 40rpx 40rpx;
    padding: 0 24rpx;
    box-sizing: border-box;

    .allMoney,
    .balance {
      width: 299rpx;
      height: 98rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .num {
        height: 56rpx;
        font-size: 40rpx;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: #ffffff;
        line-height: 47rpx;
      }

      &-btm {
        height: 34rpx;
        margin-top: 8rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        line-height: 28rpx;
      }
    }
  }

  .myServices {
    width: 686rpx;
    height: 212rpx;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 40rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    &-title {
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 38rpx;
      margin: 24rpx 0 6rpx 16rpx;
    }

    .servicesType {
      display: flex;
      align-items: center;

      &-part {
        width: 25%;
        height: 138rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        image {
          width: 60rpx;
          height: 60rpx;
        }

        text {
          height: 34rpx;
          font-size: 24rpx;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 28rpx;
          margin-top: 14rpx;
        }
      }
    }
  }

  .commonServices {
    width: 686rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 0 16rpx;
    box-sizing: border-box;
    margin-top: 24rpx;

    &-title {
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 38rpx;
      margin: 24rpx 0;
    }

    .commonServicesType {
      &-part {
        width: 654rpx;
        height: 112rpx;
        border-radius: 0rpx 0rpx 0rpx 0rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
        display: flex;
        align-items: center;
        justify-content: left;
        position: relative;

        .icon {
          width: 64rpx;
          height: 64rpx;
        }

        .name {
          margin-left: 16rpx;
          font-size: 28rpx;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #666666;
          line-height: 33rpx;
        }

        .icon-right {
          width: 24rpx;
          height: 24rpx;
          position: absolute;
          top: 22px;
          right: 0;
        }
      }
    }
  }
}
</style>